<script>

import { getFilmByIdAjax, saveOrUpdate } from '@/data/FilmData'
import { getActorListAjax } from '@/data/ActorData'
import { getCategoryListAjax } from '@/data/CategoryData'

const formData = {}
export default {
  name: 'FilmEdit',
  data () {
    return {
      show: false,
      film: { ...formData },
      rules: {
        name: [
          { required: true, message: '电影名不能为空' }
        ],
        actor: [
          { required: true, message: '请选择导演' }
        ],
        category: [
          { required: true, message: '请选择分类' }
        ],
        profile: [
          { required: true, message: '介绍不能为空' }
        ],
        status: [
          { required: true, message: '状态不能为空' }
        ]
      },
      actorList: [],
      categoryList: []
    }
  },
  methods: {
    getFilm (id) {
      this.film = { ...formData }
      this.show = true
      this.getActorList()
      this.getCategoryList()
      if (id) {
        const res = getFilmByIdAjax(id)
        if (res.code === 200) {
          this.film = { ...res.data }
        } else {
          this.$alert(res.msg, { type: 'error' })
        }
      }
    },
    submit () {
      this.$refs.formData.validate(valid => {
        if (valid) {
          const res = saveOrUpdate(this.film)
          if (res.code === 200) {
            this.$message.success(`${this.film.id ? '修改' : '添加'}成功`)
            this.show = false
            this.$emit('close')
          } else {
            this.$alert(res.msg, { type: 'error' })
          }
        }
      })
    },
    getActorList () {
      const res = getActorListAjax()
      if (res.code === 200) {
        this.actorList = [...res.data]
      }
    },
    getCategoryList () {
      const res = getCategoryListAjax()
      if (res.code === 200) {
        this.categoryList = [...res.data]
      }
    }
  }
}
</script>

<template>
  <el-dialog v-if="show" :visible.sync="show" title="电影编辑页">
    <el-form ref="formData" :model="film" :rules="rules" label-width="80px">
      <el-form-item label="电影名" prop="name">
        <el-input v-model="film.name" placeholder="请输入电影名"/>
      </el-form-item>
      <el-form-item label="导演" prop="actorId">
        <el-select v-model="film.actorId" clearable filterable>
          <el-option v-for="actor in actorList" :key="actor.id" :value="actor.id" :label="actor.name" :disabled="actor.status === 2" />
        </el-select>
      </el-form-item>
      <el-form-item label="分类" prop="categoryId">
        <el-select v-model="film.categoryId" clearable filterable>
          <el-option v-for="category in categoryList" :key="category.id" :value="category.id" :label="category.name"/>
        </el-select>
      </el-form-item>
      <el-form-item label="电影介绍" prop="profile">
        <el-input type="textarea" :rows="4" maxlength="150" show-word-limit v-model="film.profile" placeholder="请输入介绍内容"/>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="film.status">
          <el-radio :label="1">可用</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped>

</style>
